JDC Quarto Theme

For revealjs

Presentation with Quarto

  • Quarto integrates with Reveal.js to create stunning slideshows.
  • Markdown syntax is used to structure and format content.
  • Craft a finished branded presentation with this template.
  • Seamlessly weave together content and executable code.

To learn more about Quarto presentations see https://quarto.org/docs/presentations/.

Presentation title

  • YAML arguments define the content of the title slide.
  • Add arguments as needed

---
title: JDC Quarto Theme
subtitle: For revealjs
author: Author
---

Content

Section

A section starts with a level 1 heading (# Section 1). For example:


## Section example

Some content for section 1

Slides

  • Each slide starts with a level 2 heading (## Slide 1). For example:

## Slide 1

Some content for slide 1

## Slide 2

Some content for slide 2

UNHCR section

Add {.slide-blue} class to make it UNHCR blue

Lists

  • To add bullet points to a slide, use the Markdown list syntax.
  • Works the same way with numbered lists. For example:

- Item 1
    - Item 1.1
    - Item 1.2
- Item 2
- Item 3

Incremental list

  • By default the lists are not incremental.
  • Add the {.incremental} class, so each bullet will appear separately.

::: {.incremental}
- Item 1
- Item 2
:::
  • This is the 1st incremental bullet.
  • And here the 2nd.

Incremental content

  • Use . . . to separate content and turn it incremental.
  • Any content can be incremental. For example:

This will appear first

. . .

And then that!

UNHCR helpers

Text

  • Use {.text-blue} to apply UNHCR blue color
  • Use {.text-grey} for lighter text color

Background

  • Use {.bg-blue} for light blue background
  • Use {.bg-grey} for light grey background

Columns

  • To create columns, use a div container with class {.columns}, containing two or more div containers with class {.column} and a width attribute. For example:
#| echo: true

:::: {.columns}

::: {.column width="40%"}
Left column
:::

::: {.column width="60%"}
Right column
:::

::::

Images

  • To insert an image, use the Markdown image syntax. For example:
#| echo: true
![](path/to/image.jpg)

Speaker Notes:

  • You can add speaker notes to your slides that are only visible to the presenter during the presentation.
  • To add speaker notes, use the following syntax:
#| echo: true

## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

More information

You can learn more about controlling the appearance and layout of RevealJS output here: https://quarto.org/docs/presentations/revealjs/

Thank you

Enjoy the template!